
<template>
  <div class="mine">
    <MyHead title="个人中心" :noBack="true"></MyHead>
    <div class="mine-top">
      <div class="mine-info" v-if="isLogin">
        <h2 class="name">{{ "name" }}</h2>
        <h2 class="tel">{{ "16412341234" }}</h2>
      </div>
      <div class="no-login" v-else>
        <van-button
          @click="gotopage('/login')"
          round
          block
          type="primary"
          class="tada1"
          >去登录</van-button
        >
      </div>
    </div>
    <div class="cell">
      <van-cell-group inset>
        <van-cell title="我的信息" icon="manager-o" is-link></van-cell>
        <van-cell
          title="余额"
          icon="balance-o"
          value="100.2"
          is-link
        ></van-cell>
        <van-cell title="订单" icon="label-o" value="5" is-link></van-cell>
        <van-cell
          title="历史记录"
          icon="records-o"
          value="56"
          is-link
        ></van-cell>
        <van-cell title="通知" icon="volume-o" value="3" is-link></van-cell>
        <van-cell title="公告" icon="cluster-o" value="2" is-link></van-cell>
        <van-cell
          title="清除缓存"
          icon="share-o"
          value="87M"
          is-link
        ></van-cell>
        <van-cell title="设置" icon="setting-o" is-link></van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useCommonHook } from "../hooks";

const isLogin = ref(false);

const { gotopage } = useCommonHook();
</script>

<style lang="scss" scoped>
.mine {
  width: 100%;

  .mine-top {
    width: 100%;
    height: 240px;
    background: #f4f4f4;
    overflow: hidden;
    .no-login {
      width: 60%;
      margin: 100px auto;
    }
    .user-info {
      color: #333;
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 180px;
      font-size: 26px;
      h2 {
        text-align: center;
        margin-top: 20px;
      }
      .tel {
        font-size: 20px;
      }
    }
  }
}
</style>